<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div>
          <!-- 引入logo图片 -->
          <img src="../assets/navlogo.png"/>
          <span>电商后台管理系统</span>
        </div>
        <el-button @click="logout">注销</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              style="height: 100%;"
              :default-active="defaultActive"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
              :router="true"
              @select="selectMenu"
              :unique-opened="true"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/index/user">
                <el-icon><location /></el-icon>
                用户列表
              </el-menu-item>
              <el-menu-item index="/index/useradd">
                <el-icon><location /></el-icon>
                用户添加
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>支付管理</span>
              </template>
              <el-menu-item index="/index/pay">
                <el-icon><location /></el-icon>
                支付列表
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 指定二级路由的出口 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 导入确认框组件
import {ElMessageBox} from 'element-plus'

export default {
  name: "Index"
  , data(){
    return {
      defaultActive: '/index/user'
    }
  }
  , methods: {
    selectMenu(path){
      // console.log(arguments);
      this.defaultActive = path;
    },
    handleOpen(key, keyPath){
      console.log(key, keyPath)
    },
    handleClose(key, keyPath){
      console.log(key, keyPath)
    },
    logout() {
      console.log("注销");
      ElMessageBox.confirm(
          '您确认注销吗？',
          '注销',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        // 完成注销功能，将sessionStorage里面token删除
        window.sessionStorage.removeItem("token");
        // 跳转到登录页面
        this.$router.push({name: "login"});
      }).catch(() => {
        console.log("取消了注销");
      })

    }
  }
}
</script>

<style scoped>
.common-layout {
  height: 100%;
}
.common-layout > .el-container {
  height: 100%;
}
.el-container > .el-header {
  width: 100%;
  height: 80px;
  background-color: #545c64;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-container > .el-header > div {
  display: flex;
  align-items: center;
}

.el-container > .el-header > div > span {
  color: white;
  font-size: 25px;
  margin-left: 15px;
}

.el-container > .el-header > div > img {
  border-radius: 50%;
}
.el-menu {
  border-right: none;
}
</style>